<script setup lang="ts">

import {ref} from "vue";
import * as roleApi from "@/api/roleApi";
import RoleAddForm from "@/views/sys/role/RoleAddForm.vue";
import {message} from "ant-design-vue";
import {PlusOutlined, DownOutlined} from "@ant-design/icons-vue";
import GrantResourceFrom from "@/views/sys/role/GrantResourceFrom.vue";
import GrantUsersForm from "@/views/sys/role/GrantUsersForm.vue";
import * as commonDict from "@/utils/commonDict";

const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    customRender: ({index}) => `${index + 1}`,
  },
  {
    title: '角色名',
    dataIndex: 'roleName',
    align: 'center'
  },
  {
    title: '角色key',
    dataIndex: 'roleKey',
    align: 'center'
  },
  {
    title: '默认角色',
    dataIndex: 'defaultRole',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
  }
]

const tableData = ref([])
const loading = ref(false)
const roleFormRef = ref(null)
const grantResourceRef = ref(null)
const grantUsersRef = ref(null)

const loadData = () => {
  loading.value = true
  roleApi.rolePage({}).then(res => {
    tableData.value = res.records
    loading.value = false
  }).catch(() => loading.value = false)
}

loadData()

function handleDelete(roleId) {
  loading.value = true
  roleApi.deleteRole(roleId).then(() => {
    message.success('删除成功')
    loadData()
  }).catch(() => loading.value = false)
}


</script>

<template>
  <a-card :bordered="false" class="mt-2">
    <a-table bordered :columns="columns" :data-source="tableData" :loading="loading">

      <template #title>
        <div class="flex justify-between">
          <a-space>
            <a-button @click="roleFormRef.onOpen()" type="primary">
              <template #prefix>
                <PlusOutlined/>
              </template>
              新增
            </a-button>
          </a-space>
        </div>
      </template>


      <template #bodyCell="{ text, record, column }">

        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a-button @click="roleFormRef.onOpen(record.roleId)" type="link">编辑</a-button>
            <a-popconfirm
                title="是否确认删除?"
                ok-text="删除"
                cancel-text="取消"
                @confirm="handleDelete(record.roleId)"
            >
              <a-button :disabled="record.defaultRole === '1'" type="link" danger>删除</a-button>
            </a-popconfirm>
            <a-dropdown>
              <a class="text-blue-500" @click.prevent>
                授权
                <DownOutlined/>
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a @click="grantResourceRef.onOpen(record.roleId)" href="javascript:;">授权资源</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="grantUsersRef.onOpen(record.roleId)" href="javascript:;">分配用户</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>

          </a-space>
        </template>

        <template v-if="column.dataIndex === 'defaultRole'">
          {{commonDict.defaultContent[text]}}
        </template>

      </template>
    </a-table>
  </a-card>

  <role-add-form @save-successful="loadData" ref="roleFormRef"></role-add-form>
  <grant-resource-from ref="grantResourceRef"></grant-resource-from>
  <grant-users-form ref="grantUsersRef"></grant-users-form>
</template>

<style scoped>

</style>
